<template>
    <div class="uploadClass">
        <el-upload
            v-model:file-list="fileList"
            :action="propJson.upLoadUrl"
            :limit="propJson.isUpLoadLimit ? propJson.upLoadLimit : 0"
            :with-credentials="true"
            :multiple="propJson.isMultiple"
            :show-file-list="propJson.isShowFileList"
            :drag="propJson.isDraggable"
            :on-exceed="handleExceed"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :on-success="handleSuccess"
            :on-error="handleError"
            :on-progress="handleProgress"
            :before-upload="handleBeforeUpload"
            :list-type="propJson.listType"
            :auto-upload="true"
            :disabled="propJson.isDisabled"
            :data="execUploadData"
            :class="propJson.uploadSelectType === 'icon' && !propJson.isDraggable ? 'avatar-uploader' : ''"
        >
            <el-button type="primary" v-if="propJson.uploadSelectType === 'button'">{{propJson.buttonName}}</el-button>
            <el-icon class="el-icon--upload" v-if="propJson.uploadSelectType === 'icon' && propJson.isDisable">
                <component is="CloudUploadOutlined" />
            </el-icon>
            <div class="el-upload__text" v-if="propJson.uploadSelectType === 'icon' && propJson.isDisable">
                {{propJson.buttonName}}
            </div>
            <el-icon :style="execIconStyle" v-if="propJson.uploadSelectType === 'icon'">
                <component is="PlusOutlined" />
            </el-icon>
            <template #tip v-if="propJson.isShowTips">
                <div style="text-align: center">
                    <span v-for="item in showTips" :key="item">
                        {{item}} <br />
                    </span>
                </div>
            </template>
        </el-upload>

        <el-dialog v-model="dialogVisible" style="width: 90%; height: auto">
            <img :src="dialogImageUrl" alt="Preview Image" style="object-fit: contain; width: 100%; height: auto"/>
        </el-dialog>
    </div>
</template>

<script>
import {ElNotification} from "element-plus";
import {getBuildParam} from "@/request/lowcode/thirdService";

export default {
    name: "FileUploadComponent",
    props: ['propJson', 'commonParam'],
    data() {
        return {
            fileList: [],
            dialogVisible: false,
            dialogImageUrl: ""
        }
    },
    methods: {
        handleExceed() {
            // 上传失败
            ElNotification({
                title: 'Error',
                message: "上传超出限制",
                type: 'error',
            });
        },
        handlePreview(file) {
            if (this.propJson.listType === 'picture-card') {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            }
        },
        handleRemove(file, files) {

        },
        handleSuccess(response, file, files) {
            if (response.code === "200") {
                // 上传成功
                ElNotification({
                    title: 'Success',
                    message: "成功",
                    type: 'success',
                });
            } else {
                // 上传失败
                ElNotification({
                    title: 'Error',
                    message: response.errorCode + ":" + response.message,
                    type: 'error',
                });
            }
        },
        handleError(error, file, files) {
            // 上传失败
            ElNotification({
                title: 'Error',
                message: error,
                type: 'error',
            });
        },
        handleProgress() {

        },
        handleBeforeUpload: function (file) {
            // 判断文件的大小是否超出限制
            if (this.propJson.isLimitFileSize) {
                if (!this.propJson.limitFileSize) {
                    // 上传失败
                    ElNotification({
                        title: 'Error',
                        message: "文件大小超出限制",
                        type: 'error',
                    });
                    return false;
                }
                let fileSize = this.propJson.limitFileSize;
                let sizeRes = 0;
                // 根据后缀进行大小计算
                let sizeBefore = fileSize.substring(0, fileSize.length - 2);
                let sizeAfter = fileSize.substring(fileSize.length - 2, fileSize.length);
                if (sizeAfter === "KB" || sizeAfter === "kb") {
                    sizeRes = sizeBefore * 1024;
                } else if (sizeAfter === "MB" || sizeAfter === "mb") {
                    sizeRes = sizeBefore * 1024 * 1024;
                } else if (sizeAfter === "GB" || sizeAfter === "gb") {
                    sizeRes = sizeBefore * 1024 * 1024 * 1024;
                }
                if (file.size > sizeRes) {
                    // 上传失败
                    ElNotification({
                        title: 'Error',
                        message: "文件大小超出限制",
                        type: 'error',
                    });
                    return false;
                }
            }
            return true;
        }
    },
    computed: {
        execIconStyle() {
            let iconStyle = "";
            iconStyle += "color: #8c939d;";
            iconStyle += "text-align: center;";
            iconStyle += "font-size: " + this.propJson.iconFontSize + ";";
            iconStyle += "height: " + this.propJson.iconFontHeight + ";";
            return iconStyle;
        },
        showTips() {
            let resTips = [];
            if (!this.propJson.isShowTips) {
                return resTips;
            }
            if (this.propJson.isLimitFileSize) {
                resTips.push("文件大小限制为" + this.propJson.limitFileSize);
            }
            if (this.propJson.tipInfo) {
                resTips.push(this.propJson.tipInfo)
            }
            return resTips;
        },
        execUploadData() {
            let actionInfo = {
                apiParamList: this.propJson.uploadDataValue
            }
            return getBuildParam(actionInfo, this.commonParam)
        }
    }
}
</script>

<style scoped lang="less">
.avatar-uploader {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
    width: 100%;
}


/deep/ .el-upload {
    width: 100% !important;
}

.avatar-uploader:hover {
    border-color: var(--el-color-primary);
}

.uploadClass {
    padding: 10px;
}

/deep/ .el-upload-list--picture-card {
    width: 100% !important;
}
</style>